<script lang="ts" setup>
import { computed } from "vue";
import { ExtendedRouteRecordRaw } from "../../utils/types"
import { getRouteTitle } from '../../utils'
import { rawRoutes } from "../../router";

const props = defineProps<{
  items: ExtendedRouteRecordRaw[],
  title: string
}>()

const menus = computed(() => {
  return props.items.filter(r => {
    return !(/\/?:\w/.test(r.path) || r.meta.notSubMenu)
  })
})

const cls = 'ui-submenu'
</script>

<template>
  <div :class="cls">
    <div :class="`${cls}_title`">{{ title }}</div>
    <ElMenu>
      <RouterLink v-for="_ in menus" :key="_.path" :to="_.path">
        <ElMenuItem :index="_.path">
          {{ getRouteTitle(_, rawRoutes) }}
        </ElMenuItem>
      </RouterLink>
    </ElMenu>
  </div>
</template>

<style lang="scss">
.ui-submenu {
  min-width: 150px;
  background-color: #fff;
  border-right: 1px solid var(--el-border-color-lighter);
  &_title {
    height: $header-height;
    line-height: 56px;
    text-align: center;
    border-bottom: 1px solid var(--el-border-color-lighter);
    font-size: 14px;
    color: var(--el-text-color-primary);
  }
  a {
    text-decoration: none;
    color: var(--el-text-color-primary);
    &.router-link-active {
      .el-menu-item {
        background-color: #ecedf0;
      }
    }
  }
  .el-menu {
    border-right: none;
    &-item {
      height: 40px;
      color: inherit;
    }
  }
}
</style>
